<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>11_固定定位全屏遮罩</title>
    <style>
        .mask{
            background-color: rgba(0,0,0,.4);
            position: fixed;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
        }
    </style>
</head>
<body>
    <div class="mask"></div>
    <div>
        <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus asperiores, eos excepturi ipsum laborum
            non nulla optio perferendis rem reprehenderit rerum sapiente sint tempora! Corporis dignissimos molestias
            quaerat quo vero?
        </div>
        <div>Autem natus nisi obcaecati officiis tempore. Atque cumque dignissimos dolore facere incidunt minus
            perferendis quia, quos rem sit. Animi ipsa ipsam minus nam perspiciatis quia quod reiciendis sed. Autem,
            fugiat!
        </div>
        <div>Dolorum eaque enim fugit maiores minus modi nam natus non nulla praesentium. Ad doloribus incidunt
            laboriosam nesciunt nostrum quam, quisquam quo quos ratione repudiandae rerum, tempora vel, vero voluptas
            voluptatibus!
        </div>
        <div>Aliquid commodi cum explicabo maxime minima natus numquam perferendis quia temporibus voluptas.
            Accusantium, blanditiis saepe! Eos laudantium non quae quasi repellendus. Accusantium eius eveniet explicabo
            ipsam nesciunt. Dignissimos neque, ratione?
        </div>
        <div>Consectetur id ipsum voluptatum. Libero nesciunt pariatur quisquam ullam veniam. Accusamus at aut culpa
            delectus in ipsa ipsam, labore maxime natus nihil officia officiis quis sequi sunt vel voluptatem,
            voluptatum.
        </div>
        <div>Alias aliquam aliquid aperiam autem consequatur culpa debitis dignissimos eligendi esse eum expedita facere
            facilis fuga id ipsa magnam molestiae nulla, perferendis porro qui quidem quod ut veritatis voluptate
            voluptatum.
        </div>
        <div>Accusamus ad adipisci corporis eius et explicabo harum magnam, minima nostrum numquam odio odit quas
            recusandae rerum veritatis. Maiores, nisi, similique. Aliquid cumque enim, est provident quae recusandae
            tempore totam?
        </div>
        <div>Excepturi, reprehenderit, tenetur. Assumenda, consequatur deleniti dolor dolore, et iusto maxime modi nam
            nihil, quo repellat sint suscipit voluptate. Et modi officia rem saepe voluptates. Ad alias nihil quas
            velit.
        </div>
        <div>A accusamus aliquam, assumenda consectetur cumque eaque eos impedit in ipsa iusto labore laudantium nam
            natus non pariatur placeat praesentium quaerat quasi quos repellendus, reprehenderit saepe totam voluptates?
            Atque, ea?
        </div>
        <div>Aliquam animi asperiores delectus dignissimos ducimus earum eos ex fugiat harum, hic illo, ipsum iste
            laboriosam maxime neque nulla perferendis possimus quasi qui quod reiciendis, sequi tempora voluptas. Amet,
            sit.
        </div>
        <div>A distinctio dolorem dolores facere ipsa iure, mollitia nesciunt quod sint voluptatum. Accusamus aspernatur
            consectetur deleniti enim et, molestias mollitia nihil quo soluta vitae! Aspernatur earum magnam non
            repellendus. Eos!
        </div>
        <div>Alias aliquam aliquid asperiores beatae corporis cum deleniti dolorem earum explicabo illum, ipsam itaque
            iusto magni maiores maxime nulla odio placeat porro quo reiciendis saepe soluta tempore totam voluptatem
            voluptates!
        </div>
        <div>Aspernatur autem dolorem doloribus mollitia nam quos repellendus. Aperiam dolor id incidunt veritatis!
            Accusamus, accusantium aliquid asperiores consequuntur cum dolores ex fugit, libero nesciunt obcaecati
            provident quis reiciendis, unde velit.
        </div>
        <div>Cupiditate delectus, dicta dolores dolorum, id ipsam ipsum, maiores nostrum optio quam quidem reprehenderit
            sed sequi tenetur unde? Amet consectetur delectus dolorum, explicabo minus placeat quod sunt suscipit totam
            voluptatum.
        </div>
        <div>Distinctio nobis perferendis quia. Accusamus accusantium alias blanditiis deserunt, illo in inventore ipsa
            ipsam, itaque iure laudantium molestias officia officiis pariatur placeat porro possimus quam quidem unde
            vero voluptate, voluptates.
        </div>
        <div>Cupiditate eum eveniet in inventore ipsa minima modi non quasi. Tempore, veniam, veritatis. At commodi
            consectetur ea, eum harum hic illum modi officiis optio porro quam reiciendis repellendus totam veritatis.
        </div>
        <div>Animi dicta expedita ipsum molestiae molestias quaerat recusandae sed totam. Aut, commodi dolor doloremque
            eaque earum facere iure libero modi mollitia non odit, officia quae, quibusdam soluta sunt vero voluptate.
        </div>
        <div>Cupiditate distinctio dolore numquam rerum tenetur! Consequatur delectus eligendi natus necessitatibus
            voluptatem! Cumque dolor dolore, eum hic ipsum labore laboriosam natus neque nostrum perferendis quasi
            quisquam quos repellat ut voluptates.
        </div>
        <div>Alias autem consequuntur doloribus dolorum esse, itaque obcaecati omnis! Doloribus, eius id in minima
            numquam optio quibusdam quidem sapiente veniam? Corporis distinctio doloribus magnam nobis nulla optio ut
            vel voluptates!
        </div>
        <div>Doloribus est modi neque odio quae, quasi quod tempore vitae! Ab aperiam, asperiores consequuntur, deleniti
            eaque exercitationem laudantium nobis officia perferendis porro quas ratione recusandae sed? Magnam officia
            reprehenderit tenetur?
        </div>
        <div>Commodi eaque expedita illum itaque officiis, omnis placeat provident quas quis rem repudiandae saepe,
            sequi sunt! Architecto aut commodi culpa, expedita porro quod tenetur. Dolorum molestias nihil officiis quo
            voluptas.
        </div>
        <div>Ad alias autem corporis, distinctio dolorem dolorum facere hic id officiis perspiciatis praesentium quaerat
            quidem rem, repellendus sint ut vel! A atque dolorum eligendi harum iure, natus quae quaerat quia.
        </div>
        <div>Accusamus aperiam deserunt distinctio iure iusto laudantium mollitia nisi officiis perspiciatis provident,
            sed ut? Adipisci dicta fuga maiores maxime minima nesciunt non reiciendis repellat soluta! Aliquid amet
            laudantium molestiae necessitatibus.
        </div>
        <div>Ad aliquam autem cumque eveniet excepturi facere ipsam labore molestiae odit officiis quasi quidem, ratione
            saepe, velit voluptas. Delectus dolor illum maxime reiciendis sit sunt, unde voluptatum? Dolore, iure odit?
        </div>
        <div>Accusamus beatae doloribus eaque, esse excepturi fuga fugit illum iure iusto laboriosam laudantium, libero
            minima natus nemo nihil odio, perferendis possimus provident quos repellendus repudiandae soluta suscipit
            unde ut voluptatem!
        </div>
        <div>Alias aperiam est maxime porro repellat sapiente similique soluta sunt temporibus veniam? Deserunt
            dignissimos dolores eaque, eveniet ipsa itaque iure nam nihil perferendis, perspiciatis qui quibusdam quidem
            totam unde vitae.
        </div>
        <div>Assumenda consequatur distinctio ducimus eaque earum enim error expedita explicabo facere fugit illum
            labore laudantium molestiae nihil nisi nobis, odio officiis pariatur possimus quae quis recusandae rerum
            sint ullam voluptate.
        </div>
        <div>Adipisci aliquid aut autem corporis dicta dolor dolore dolorum ducimus eligendi excepturi id illo in
            incidunt ipsa ipsum, labore magni natus neque obcaecati officiis quae, quia reiciendis rerum voluptates
            voluptatibus.
        </div>
        <div>Accusamus ad, aspernatur atque beatae consectetur debitis error facere fuga fugit hic ipsa ipsam, laborum
            libero modi nam nostrum quam quos, repellat! A ab dicta eveniet fugit laboriosam laudantium suscipit?
        </div>
        <div>Culpa iste officia optio quam quisquam. Aliquam aliquid atque consequatur doloribus eos exercitationem
            facilis fugiat hic illo ipsam ipsum minima molestias officiis perspiciatis quaerat qui rem repellendus saepe
            totam, voluptas!
        </div>
        <div>Adipisci aliquam consequatur consequuntur dolorum eligendi eos eum eveniet id incidunt itaque labore
            laboriosam natus, optio perspiciatis quaerat qui recusandae sapiente sequi ut voluptas voluptate voluptatem
            voluptatibus? Blanditiis doloribus, ducimus?
        </div>
        <div>Earum facere in modi nisi perspiciatis quis quisquam ratione veritatis! Ab adipisci aperiam at blanditiis
            cupiditate distinctio earum, ex fugit, ipsam itaque labore nihil quas sequi soluta tenetur veritatis
            voluptates?
        </div>
        <div>Architecto ipsa laudantium officia ratione! Ad culpa cumque deleniti ducimus ea eligendi eos expedita id
            nam nemo, nobis, quis repudiandae sunt, tempore veniam vero voluptatum. Alias fugiat fugit numquam officiis?
        </div>
        <div>Asperiores et harum id iure mollitia nisi obcaecati optio quos veritatis vitae. At consequatur deleniti,
            doloribus earum error esse et labore magni nam, nisi qui quibusdam repellendus reprehenderit, sit sunt?
        </div>
        <div>A architecto assumenda autem cumque cupiditate, dignissimos distinctio dolore ducimus et eveniet id impedit
            ipsa itaque iusto laudantium magnam numquam obcaecati quas ratione sed sunt temporibus voluptatem! Nemo,
            nulla qui!
        </div>
        <div>Est eum excepturi impedit inventore laboriosam natus nihil provident quas, quia ratione reprehenderit,
            similique, sint vel? Dicta eum, quos? Aperiam autem, dignissimos exercitationem incidunt itaque nisi nulla
            numquam provident veritatis?
        </div>
        <div>Ab accusamus adipisci culpa cum dignissimos esse et facilis hic impedit iste iusto laborum nemo omnis
            optio, quam ratione sed sit unde, veritatis voluptate? Aspernatur eius laboriosam magni non temporibus!
        </div>
        <div>Adipisci amet architecto aspernatur atque ea est et ex facilis hic in iste molestiae mollitia nihil non
            numquam obcaecati quam quas qui, quidem quis repellendus sed, sit sunt voluptatem voluptatum!
        </div>
        <div>Adipisci asperiores dignissimos dolore exercitationem iste iure labore, laborum modi nemo, perferendis,
            placeat quis repellat sequi tempora veniam? Aliquam consequuntur doloremque eius explicabo ipsa laborum
            natus neque qui quos ratione.
        </div>
        <div>Debitis explicabo illum nobis, praesentium quo sunt? Ab beatae esse eum, facilis iure minima odit. Animi,
            atque beatae consequuntur, deserunt doloremque non nulla officia praesentium sed tempora, totam vel vitae?
        </div>
        <div>Natus nesciunt omnis quis? Animi sapiente, voluptatem? Amet aperiam consequuntur deleniti dolorum eius
            eligendi, enim, eum id illum iste natus necessitatibus neque nulla quaerat qui, repudiandae sint veritatis
            vitae. Doloribus.
        </div>
        <div>Ab accusamus, id laborum maxime qui quia quibusdam voluptate? A asperiores beatae consequuntur cum cumque
            dolor dolore dolorem doloremque, eligendi enim expedita fugit, laborum neque optio quam ratione ullam vel?
        </div>
        <div>Culpa delectus, distinctio dolorum error explicabo itaque laborum minima minus nulla, officiis omnis quos
            reiciendis similique. A ad alias asperiores dignissimos ducimus enim expedita, itaque obcaecati porro quos
            sunt tenetur!
        </div>
        <div>Ab accusantium consectetur dignissimos et facere facilis hic incidunt laboriosam magni maiores, nobis nulla
            reiciendis sit ut veniam. Amet dicta dolorem esse minima numquam pariatur quae quaerat quibusdam tenetur
            ullam.
        </div>
        <div>Aliquam blanditiis culpa eaque illo impedit nihil non odio soluta. A ab ducimus laboriosam officia quas qui
            reprehenderit. Amet fugit illo magni vitae? Animi eum molestiae placeat soluta temporibus, velit.
        </div>
        <div>Aliquid blanditiis debitis dolores fugiat maxime rerum tempore voluptates. Dicta doloremque exercitationem
            obcaecati officiis quam reprehenderit, temporibus? Adipisci asperiores cumque distinctio ducimus ea quas
            veritatis, vero! Aperiam libero officiis quos?
        </div>
        <div>Amet eos magnam mollitia. Ad animi architecto aut culpa dicta doloremque, ea eum ipsa laudantium modi
            molestias natus necessitatibus nemo non odio omnis perferendis quaerat quam, tempore, veniam vero voluptas?
        </div>
        <div>Aspernatur aut autem consequatur eius, eligendi maiores porro qui quod sequi sit tempora tempore,
            temporibus vitae voluptas voluptate. Autem dignissimos dolorum eaque eius error non quae quod quos rerum
            tenetur?
        </div>
        <div>Aliquam architecto deleniti dolorem doloribus dolorum earum eos error et eveniet ex, expedita fugit illum
            iure iusto magni officia quae quaerat qui quibusdam quisquam recusandae soluta sunt tempore temporibus vel.
        </div>
        <div>A ab accusamus aliquam animi architecto, debitis dolorem enim eos, exercitationem fuga in inventore itaque
            laudantium nobis, odio qui quo repellendus suscipit velit voluptas? Ab at fuga libero natus totam.
        </div>
        <div>Atque, debitis dolor excepturi iure magni modi mollitia nostrum quidem quos veniam? Consequuntur ea eum,
            eveniet iusto laboriosam officia pariatur? At consequatur delectus dolor ducimus, ipsam neque odit rerum
            sed?
        </div>
        <div>At autem corporis cum, cumque deserunt dolore eaque earum est, laboriosam maiores praesentium, quidem
            repellendus saepe tempora unde vel voluptas. Amet autem deleniti doloremque earum facilis inventore ipsam
            sequi veritatis!
        </div>
        <div>Animi culpa ducimus incidunt ipsum rerum? Ab cumque, enim facere magnam mollitia odio quod sint velit.
            Adipisci alias animi dolore doloremque ipsum, labore laborum necessitatibus provident ratione sint! Maxime,
            mollitia?
        </div>
        <div>Accusantium asperiores aspernatur aut debitis dignissimos dolorem doloremque dolorum ex fugiat fugit hic
            ipsum maiores neque nostrum placeat possimus, praesentium provident, quisquam quos ratione reiciendis rem
            sint tempore unde voluptatibus.
        </div>
        <div>Adipisci consequatur deserunt, dicta distinctio dolores impedit incidunt nulla odit quisquam quo reiciendis
            sequi. Aspernatur debitis doloribus esse eum expedita magnam maxime molestiae quam quibusdam repellat,
            repudiandae sunt ut veniam?
        </div>
        <div>Earum, quasi, repudiandae? Consectetur deleniti fugit ipsum iste maiores mollitia, possimus provident
            quaerat qui repellendus? Aspernatur beatae dicta excepturi id inventore magni necessitatibus nostrum odio
            quo saepe. Explicabo, nesciunt quia?
        </div>
        <div>Ab aliquid aperiam atque, delectus doloremque et ipsam, officia, perspiciatis provident qui quos similique
            vel vitae! Libero, modi, totam. Ab aspernatur at, dicta doloremque et exercitationem nemo sapiente velit
            voluptatum.
        </div>
        <div>Ab accusamus amet aspernatur corporis, delectus distinctio error facilis iste magni modi molestias nisi
            nostrum ratione sapiente suscipit totam vitae? Commodi culpa cum doloribus enim nam perferendis saepe
            sapiente soluta.
        </div>
        <div>Accusantium aut doloremque esse exercitationem facilis saepe. Architecto eius enim expedita fugiat impedit,
            iusto, modi officia perspiciatis porro, provident rerum similique sint tenetur! A, asperiores in
            perspiciatis possimus quibusdam voluptatum!
        </div>
        <div>Ab accusantium aliquid amet aspernatur assumenda autem cum dignissimos dolor dolore doloribus explicabo
            harum id ipsa ipsam itaque, laboriosam, magni modi necessitatibus, odit optio pariatur quae quibusdam
            quisquam tenetur voluptate.
        </div>
    </div>
</body>
</html>